import React from "react";
import { Routes, Route, Navigate } from "react-router-dom";

import { permits } from "./data";
import Menu from "./Menu";
import Content from "./Content"
import { AppContextProvider } from "./AppContext"

function Home() {
  const children = permits.filter((p) => p.parentId === 1);
  const menuProps = { permits, children };
  return <Menu {...menuProps} />;
}

function Main(){
  const menuProps = { permits };
  return <Content {...menuProps} />
}

export default function App() {

  return (
    <AppContextProvider>
    <div>
      <nav>
        <Routes>
          <Route path="/home/*" element={<Home />}></Route>
          <Route path="/*" element={<Navigate to="/home" />}></Route>
        </Routes>
      </nav>
      <div>
        <Routes>
          <Route path="/home/*" element={<Main />}></Route>
          <Route path="/*" element={<Navigate to="/home" />}></Route>
        </Routes>
      </div>
    </div>
      </AppContextProvider>
  );
}
